<template>
  <tipTitle :cssClass="{ 'background': 'linear-gradient(90deg, rgb(3, 103, 174) 0%, rgba(3, 102, 174, 0) 100%)' }">
    <template #title>
      <span style="color: rgb(64, 240, 255);font-size: 18px;padding: 10px">库存健康指标</span>
      <a-tooltip :overlay-style="{maxWidth: '500px'}">
        <template #title>
          <div>
            库存周转率 =（销售数量*成本单价）/（库存数量*成本单价）
          </div>
          <div>
            库销比 =（库存数量*成本单价）/（销售数量*成本单价）
          </div>
        </template>
        <QuestionCircleOutlined style="color: #fff;font-size: 16px;margin-left: -135px"/>
      </a-tooltip>
      <div class="monthTitle" style="width: auto;margin-left: -120px;">
        <a-select v-model:value="month"  @change="handleChangeMonth"
                  size="small">
          <a-select-option :value="item" v-for="item in monthList" :key="item">
              {{ item }}
          </a-select-option>
        </a-select>
      </div>
      <a-select v-model:value="mode1" @change="handleChange" class="selectPopup"
                size="small">
        <a-select-option value="1">
          业务维度
        </a-select-option>
        <a-select-option value="2">
          财务维度
        </a-select-option>
      </a-select>
    </template>
  </tipTitle>
  <borderBox6 style="width:460px;height:290px">
    <div style="position: absolute;display: flex" class="platformClass">
      <a-segmented @change="handleChange" v-model:value="mode" :options="data" style="position: absolute;z-index: 1000;margin-left: 5px;margin-top: 5px"/>
      <a-select v-model:value="mode2" @change="handleChange" style="width:auto;position: absolute;left:370px;z-index: 1000;margin-top: 7px"
                size="small">
        <a-select-option value="all">
          全流程
        </a-select-option>
        <a-select-option value="oversea">
          海外仓
        </a-select-option>
      </a-select>
    </div>
    <inventoryHealthy :obj="obj"/>
  </borderBox6>
</template>
<script setup>
import tipTitle from '@/components/bigData/component/title.vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import Content from './component/content.vue'
import borderBox6 from '@/components/bigData/component/borderBox6/index.vue'
import {message} from "ant-design-vue";
import {LoadingOutlined} from "@ant-design/icons-vue";
import inventoryHealthy from './component/inventoryHealthy.vue'
import dayjs from "dayjs";
import {ref} from "vue";
import {getOfsInventoryRateSalesRatio} from "@/api/bigData/realTimeTable.js";
const indicator = h(LoadingOutlined, {
  style: {
    fontSize: '100px',
  },
  spin: true,
});
const month = ref('')
const obj = ref({})
const list = ref([])
const mode1 = ref('1')
const mode2 = ref('all')
const monthList = ref([])
const data = reactive(['30天', '60天', '90天', '180天', '360天']);
const mode = ref('30天');
const init = async () => {
  try{
    let tempMode = mode.value.split('天')[0]
    const res = await getOfsInventoryRateSalesRatio({
      mode: tempMode,
      mode1: mode1.value,
      mode2: mode2.value,
    })
    list.value = res.result.records
    monthList.value = res.result.records.map(item => item.month)
    month.value = dayjs().subtract(1, 'month').format('YYYY-MM')
    selectMonth(month.value,list.value)
  }catch (e){
    message.error(e.message)
  }
}

const selectMonth = (value,records) => {
  obj.value = records.filter(item => item.month === value)[0]
  console.log(obj.value)
}
const handleChangeMonth = () => {
  selectMonth(month.value,list.value)
}
defineExpose({
  init
})
const handleChange = () => {
  init()
}
onMounted(() => {
  init()
})
</script>
<style lang="less" scoped>
.table-wrap {
  // background-color: #093563;
  // padding: 0 20px;
  color: #ffffff;
  padding: 10px;

  .scroll {
    max-height: 225px;
    overflow: hidden;
  }
}

.titleContent {
  display: flex;
  align-items: center;
  // background-color: #093563;
  justify-content: space-between;
  height: 40px;

  .tit {
    width: 25%;
    text-align: center;
  }
  .money {
    text-align: end;
    padding-right: 10px;
  }
}

.countContent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  font-size: 14px;

  .descr {
    width: 25%;
    padding: 10px 0;
    text-align: center;
    // background-color: #093563;
    border: none;
  }
  .money {
    text-align: end;
    padding-right: 10px;
  }
}
:deep(.ant-select-selector) {
  background-color: transparent !important;
  color: #009DFF !important;
  border: none !important;
}

:deep(.ant-select-arrow) {
  color: #009DFF !important;
}
:deep(.ant-segmented){
  background-color:#042855!important;
  color:#fff!important;
}
:deep(.ant-segmented-item-selected){
  background-color:#042855!important;
  color:#fff!important;
  font-weight: 1000 !important;
}
:deep(.monthTitle .ant-select-selector){
  background-color: transparent !important;
  color: #fff !important;
  border: none !important;
}

</style>
